import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'umi';
import { connect } from 'dva';
import { Menu, Icon } from 'antd';
import { getRouteTitle } from '@/utils/routes';

import styles from './NavBar.less';

@withRouter
@connect(({ loading, login }) => ({ loading, login }))
class NavBar extends PureComponent {

  render() {
    const {
      locationPathname,
      user,
      handleLogout,
    } = this.props;

    return (
      <div className={styles.container}>
        <span className={styles.title}>
          {getRouteTitle(locationPathname)}
        </span>
        <Menu mode="horizontal">
          <Menu.Item key="user">
            <Icon type="user"/>{user.username}
          </Menu.Item>
          <Menu.Item key="logout" onClick={handleLogout}>
            退出登录
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

NavBar.propTypes = {
  loading: PropTypes.object,
};

export default NavBar;
